/* mixins */
@import "src/mixins.scss";

@include DEBUG();
@include useFontSmoothingOnMacOS();
:host {
  height: 100%;
  box-sizing: border-box;
  @include flex_dis();
  @include flex(flex-direction, column);
  @include flex(justify-content, center);
}

.container {
  width: 7.5rem;
  height: 11.86rem;
  // @include flex_dis();
  // @include flex(flex-direction, column);
  padding-top: 1.44rem;
  box-sizing: border-box;
  position: relative;

  &.show-mask::before {
    content: "";
    display: block;
    position: absolute;
    top: 1.63rem;
    left: 0.28rem;
    width: 6.94rem;
    height: 0.9rem;
    background: url("src/assets/img/end-year/rongyu/bg-header-mask.png") center
      center / 100% no-repeat;
    z-index: 99;
  }

  &::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0.28rem;
    width: 6.94rem;
    height: 2.12rem;
    background: url("src/assets/img/end-year/rongyu/bg-footer.png") center
      bottom / 100% no-repeat;
    z-index: 99;
  }
  /* close */
  .container-close {
    position: absolute;
    right: 0.3rem;
    top: 0.46rem;
    width: 0.46rem;
    height: 0.46rem;
    z-index: 999;
  }

  /* main */
  .container-main {
    height: 100%;
    padding: 0.28rem 0; /* 防止背景层次重叠 */
    box-sizing: border-box;
    /* wrapper */
    .container-main--wrapper {
      height: 100%;
      overflow-y: scroll;
    }
    /* section */
    section.main-item {
      width: 6.62rem;
      height: 5.08rem;
      background-size: 100% 100%;

      margin: 0.02rem auto;
      padding-top: 0.1rem 0 1.62rem;

      .main-item__title {
        width: 4.18rem;
        height: 0.52rem;
        background-size: 100% 100%;
        margin: 0 auto;
      }

      .main-item__top3 {
        // height: calc(100% - );
        @include flex_dis();
        @include flex(flex-direction, column);
        @include flex(align-items, center);
        position: relative;

        .top3-item {
          position: absolute;

          .top3--avatar {
            position: absolute;
            z-index: 2;
            img {
              width: 100%;
              height: 100%;
              display: block;
              object-fit: cover;
              border-radius: 50%;
            }

            &__live {
              position: absolute;
              bottom: 0;
              left: 0;
            }
          }
          .top3--crown {
            background-size: 100% 100%;
          }
          .top3--mask {
            width: 100%;
            height: 100%;
            background-size: 100% 100%;
            z-index: 1;
            position: absolute;
            right: 0;
            left: 0;
            img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
          .top3--name {
            width: 2.26rem;
            height: 0.56rem;
            background-size: 100% 100%;
            line-height: 0.56rem;
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 3;
            .content {
              height: 100%;
              /* 昵称超出省略 */
              @include useEllipsis(1.44rem);
              font-size: 0.24rem;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #46342c;
              margin: 0 auto;
              text-align: center;
            }
          }
        }

        .top3-1 {
          z-index: 3;
          top: 0.22rem;
          left: 1.94rem;
          width: 2.74rem;
          height: 2.18rem;
          overflow: hidden;
          .top3--name {
            left: 0.24rem;
          }
          .top3--avatar {
            top: 0.44rem;
            left: 0.68rem;
            width: 1.36rem;
            height: 1.36rem;
          }
          .top3--crown {
            width: 1.02rem;
            height: 0.58rem;
            position: absolute;
            top: 0;
            left: 0.86rem;
            z-index: 3;
          }
        }
        .top3-2,
        .top3-3 {
          top: 1.04rem;
          width: 2.26rem;
          height: 1.8rem;
          overflow: hidden;

          .top3--avatar {
            width: 1.11rem;
            height: 1.11rem;
            top: 0.35rem;
            left: 0.57rem;
          }

          .top3--crown {
            width: 0.78rem;
            height: 0.44rem;
            position: absolute;
            top: 0;
            left: 0.74rem;
            z-index: 3;
          }
        }
        .top3-2 {
          z-index: 2;
          left: 0.4rem;
        }
        .top3-3 {
          z-index: 1;
          right: 0.44rem;
        }
      }
    }
    > section:not(:last-of-type) {
      margin-bottom: 0.4rem;
    }
  }
}
